import { Chart } from '@antv/g2';
import { useEffect } from 'react';

export default ({ container }: any) => {
  useEffect(() => {
    const data = [
      { year: '2024年1月', value: 77 },
      { year: '2024年2月', value: 64 },
      { year: '2024年3月', value: 73 },
      { year: '2024年4月', value: 64 },
      { year: '2024年5月', value: 88 },
    ];

    const chart = new Chart({
      container,
      autoFit: true,
    });

    chart
      .data(data)
      .encode('x', 'year')
      .encode('y', 'value')
      .scale('x', {
        range: [0, 1],
      })
      .scale('y', {
        domainMin: 0,
        nice: true,
      });

    chart.line().label({
      text: 'value',
      style: {
        dx: -10,
        dy: -12,
      },
    });

    chart.point().style('fill', 'white').tooltip(false);

    chart.render();
  }, []);

  return <div id={container}></div>;
};
